<!DOCTYPE html>
<!-- 事件处理器 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="utils/vue.js">
			
		</script>
		<style type="text/css">
			.active{
				width: 100px;
				height: 50px;
				background: #008000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="greet">Greet</button>
			<p @click="say('hi')" style="color: #008000;">say hi</p>
			<!-- 事件修饰符 -->
			<!-- 阻止单击事件冒泡 -->
				<button v-on:click.stop = "greet">:click.stop</button>
				<!-- click事件只能点击一次 -->
				<button v-on:click.once = "greet">:click.once</button>
				<!-- 左键事件 -->
				<button v-on:click.left = "greet">:click.left</button>
				<!-- 右键事件 -->
				<button v-on:click.right = "greet">:click.right</button>
				<!-- 中间滚轮事件 -->
				<button v-on:click.middle = "greet">:click.middle</button>
				<!-- 修饰符可以串联 -->
				<button v-on:click.once.middle='greet'>修饰符可以串联</button>
			
			<div >
				
			</div>
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					name:"双双！"
				},
				methods:{
					greet:function(event){
						//this指向当前vue实例
						alert("hello " + this.name)
						//event是原生DOM事件
						if(event){
							// alert(event.target.tagName)
						}
					},
					say:function(message){
						alert(message);
					}
				}
			})
		</script>
	</body>
</html>
